

import React, {useEffect} from 'react'
import { Form, Input, Select, Button, Row, Col } from 'antd';
import { Link } from 'react-router-dom';
import { reg } from '../../utils/validate';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { toast } from '../../utils/common';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { ajax } from '../../api';

function LoginAccount({history,user,location}:any) {
    const {userInfo, changeUserInfo} = user
    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    }
    const tailLayout = {
        wrapperCol: {
            offset: 6,
            span: 18
        }
    }
    const [form] = Form.useForm()
    const onReset = () => {
        form.resetFields()
    }
    const onFinish = (value:any) => {
        form.validateFields()
            .then(async valid => {
                let { code, result, token }: any = await ajax.login(value)
                if (code == 200) {
                    sessionStorage.setItem("token", token)
                    localStorage.setItem("username", result.username)
                    changeUserInfo(result)
                    history.push('/main')
                }
            })
            .catch(err=>{
                toast.error("请填写有效的信息")
            })
    }
    const onFinishFailed = () => {
        toast.error("请填写有效的信息")
    }
    useEffect(()=>{
        var username = new URLSearchParams(location.search).get('username')
        if(username){
            form.setFieldsValue({username})
        } else {
            username = localStorage.getItem("username")
            if(username){
                form.setFieldsValue({username})
            }
        }
    },[])
    return (
        <div style={{ padding: '20px 0' }}>
            <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} onFinishFailed={onFinishFailed}>
                <Form.Item name="username" label="用户名" rules={[{ required: true, message:'请输入用户名' }]}>
                    <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
                </Form.Item>
                <Form.Item name="password" label="密码" rules={[{ required: true, message:'请输入密码' },
                {pattern:reg.pwd, message:'请输入6-16位数字加字母'}]}>
                    <Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <Row>
                        <Col span={11}>
                            <Button block type="primary" htmlType="submit">
                                登录
                            </Button>
                        </Col>
                        <Col offset={2} span={11}>
                            <Button danger type="primary" block htmlType="button" onClick={onReset}>
                                重置
                            </Button>
                        </Col>
                    </Row>
                </Form.Item>
                <Form.Item {...{wrapperCol:{span:24}}}>
                    <Row justify="space-between">
                        <Col>
                            <Link to="/forgetpass">忘记密码</Link>
                        </Col>
                        <Col>
                            <Link style={{color:'orange'}} to="/register">没有账号，先去注册</Link>
                        </Col>
                    </Row>
                </Form.Item>
            </Form>
        </div>
    )
}

export default inject("user")(observer(withRouter(LoginAccount)))